{% extends "base/base.html" %}

{% block title %}积分商城 - 妙趣拾光锦盒{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card border-0 shadow-sm mb-5">
                <div class="card-body p-5">
                    <h1 class="text-center mb-5">积分商城</h1>
                    
                    <div class="mb-5">
                        <div class="alert alert-primary">
                            <div class="d-flex">
                                <div class="me-3">
                                    <i class="fas fa-info-circle fa-2x"></i>
                                </div>
                                <div>
                                    <h5 class="alert-heading">您当前的积分: <span class="fw-bold">{{ user.profile.points|default:"0" }}</span></h5>
                                    <p class="mb-0">通过购买盲盒、参与活动，获取更多积分兑换精美礼品！</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-star text-warning me-2"></i>如何获取积分</h3>
                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-0 shadow-sm">
                                    <div class="card-body text-center p-4">
                                        <div class="icon-circle bg-primary-light mx-auto mb-3">
                                            <i class="fas fa-box-open text-primary"></i>
                                        </div>
                                        <h5>购买盲盒</h5>
                                        <p class="text-muted">每购买一个盲盒获得10积分，特别盲盒可获得额外积分。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-0 shadow-sm">
                                    <div class="card-body text-center p-4">
                                        <div class="icon-circle bg-primary-light mx-auto mb-3">
                                            <i class="fas fa-user-friends text-primary"></i>
                                        </div>
                                        <h5>邀请好友</h5>
                                        <p class="text-muted">成功邀请一位好友注册并购买，双方各获得20积分。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-0 shadow-sm">
                                    <div class="card-body text-center p-4">
                                        <div class="icon-circle bg-primary-light mx-auto mb-3">
                                            <i class="fas fa-comment-alt text-primary"></i>
                                        </div>
                                        <h5>评价晒单</h5>
                                        <p class="text-muted">分享开箱体验并评价，获得5积分，附带图片可获得10积分。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 border-0 shadow-sm">
                                    <div class="card-body text-center p-4">
                                        <div class="icon-circle bg-primary-light mx-auto mb-3">
                                            <i class="fas fa-calendar-check text-primary"></i>
                                        </div>
                                        <h5>参与活动</h5>
                                        <p class="text-muted">参与线上线下活动，根据活动规则获得相应积分。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-gift text-danger me-2"></i>积分兑换礼品</h3>
                        <div class="row">
                            {% for item in points_items %}
                            <div class="col-md-6 mb-4">
                                <div class="card h-100 points-item">
                                    <img src="{{ item.image.url }}" class="card-img-top" alt="{{ item.name }}">
                                    <div class="card-body">
                                        <h5 class="card-title">{{ item.name }}</h5>
                                        <p class="card-text text-muted">{{ item.description }}</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="points-cost">
                                                <i class="fas fa-star text-warning me-1"></i>
                                                <span class="fw-bold">{{ item.points_cost }}</span> 积分
                                            </div>
                                            <div>
                                                <button class="btn btn-outline-primary btn-sm" 
                                                        {% if user.profile.points < item.points_cost %}disabled{% endif %}
                                                        onclick="location.href='{% url 'points:redeem' item.id %}'">
                                                    兑换
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-white border-top-0">
                                        <small class="text-muted">剩余数量: {{ item.stock }}</small>
                                    </div>
                                </div>
                            </div>
                            {% empty %}
                            <div class="col-12">
                                <div class="text-center py-5">
                                    <i class="fas fa-box-open fa-3x mb-3 text-muted"></i>
                                    <h5>暂无可兑换礼品</h5>
                                    <p class="text-muted">新品即将上架，请持续关注！</p>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-history text-info me-2"></i>积分明细</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>类型</th>
                                        <th>描述</th>
                                        <th class="text-end">积分变动</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for record in points_records %}
                                    <tr>
                                        <td>{{ record.created_at|date:"Y-m-d H:i" }}</td>
                                        <td>{{ record.get_type_display }}</td>
                                        <td>{{ record.description }}</td>
                                        <td class="text-end {% if record.points > 0 %}text-success{% else %}text-danger{% endif %}">
                                            {{ record.points }}
                                        </td>
                                    </tr>
                                    {% empty %}
                                    <tr>
                                        <td colspan="4" class="text-center py-4">
                                            <p class="text-muted mb-0">暂无积分记录</p>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div class="mb-5">
                        <h3 class="mb-4"><i class="fas fa-question-circle text-primary me-2"></i>积分规则</h3>
                        <div class="accordion" id="pointsRulesAccordion">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingOne">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        积分有效期
                                    </button>
                                </h2>
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#pointsRulesAccordion">
                                    <div class="accordion-body">
                                        积分自获得之日起有效期为<strong>12个月</strong>。即将过期的积分会在到期前一个月通过短信提醒您使用。
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingTwo">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        兑换规则
                                    </button>
                                </h2>
                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#pointsRulesAccordion">
                                    <div class="accordion-body">
                                        <ul class="mb-0">
                                            <li>积分兑换遵循"先进先出"原则，即优先使用即将到期的积分</li>
                                            <li>兑换成功后不支持退换</li>
                                            <li>部分礼品数量有限，兑完即止</li>
                                            <li>实物礼品将在3个工作日内安排发货</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="headingThree">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        积分调整
                                    </button>
                                </h2>
                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#pointsRulesAccordion">
                                    <div class="accordion-body">
                                        在以下情况下，公司有权调整用户积分：
                                        <ul class="mb-0">
                                            <li>订单取消或退款，相应积分将被扣除</li>
                                            <li>发现用户通过不正当手段获取积分，将扣除相应积分并可能冻结账户</li>
                                            <li>系统故障导致的积分错误，公司有权进行修正</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center">
                <a href="{% url 'blindbox:list' %}" class="btn btn-primary">
                    <i class="fas fa-box-open me-2"></i>购买盲盒赚取积分
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .icon-circle {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .icon-circle i {
        font-size: 1.75rem;
    }
    
    .bg-primary-light {
        background-color: rgba(13, 110, 253, 0.1);
    }
    
    .points-item {
        transition: all 0.3s ease;
        border: 1px solid rgba(0,0,0,.125);
    }
    
    .points-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .points-cost {
        font-size: 1.1rem;
    }
</style>
{% endblock %} 